<template>
	<div class="title-bar">
    <div class="title">
      {{ title }}
    </div>
		
		<div class="search" v-if="showBtn">
			<el-tooltip
				class="item"
				effect="dark"
				:content="showSearch ? t('button.Hide') : t('button.Show')"
				placement="left"
			>
				<el-button :icon="ArrowUp" circle @click="onClose()" v-if="showSearch" />
				<el-button :icon="ArrowDown" circle @click="onShow()" v-else />
			</el-tooltip>
		</div>

	</div>
  <el-divider />

	<div v-show="showSearch">
		<slot></slot>
	</div>
</template>

<script lang="ts" setup name="search-bar">
import { ref } from "vue";
import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import {useI18n} from "vue-i18n";
const {t} = useI18n();
defineProps({
	/**
	 * 标题
	 */
  title: {
    type: String,
    default: ""
  },
	showBtn: {
		type: Boolean,
		default: true
	},
});

// 抛出事件

const showSearch = ref(true);

const onShow = () => {
	showSearch.value = true;
};

const onClose = () => {
	showSearch.value = false;
};
</script>

<style lang="scss" scoped>
.title-bar {
	display: flex;
	justify-content: space-between;
  margin: .1rem 0;
	//height: 24px;

  .title {
    font-size: 18px;
    color: #333333;
    line-height: 24px;
    font-weight: bold;
  }
	.search {
		//line-height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    //width: 100%;
    //height: 24px;
	}

	:deep(.el-divider--horizontal) {
		margin: 10px 0 25px 0;
	}
}
</style>
